<template>
  <view class="option-card f ai-c">
    <view class="image"
      ><image :src="imageSrc" mode="widthFix" style="width: 80rpx"></image
    ></view>
    <view class="description-info f fd-col ai-fs">
      <text class="title">{{ descriptionData.title }}</text>
      <text class="description">{{ descriptionData.description }}</text>
    </view>
    <view class="icon-arrow-right"
      ><uni-icons type="arrowright" size="30"></uni-icons
    ></view>
  </view>
</template>

<script>
export default {
  name: "option-card",
  props: {
    imageSrc: {
      type: String,
      required: true,
    },
    descriptionData: {
      type: Object,
      default: () => ({ title: "", description: "" }),
      required: true,
    },
  },
  setup() {
    return {};
  },
};
</script>
<style lang='scss' scoped>
.option-card {
  margin-bottom: 30rpx;
  padding: 20rpx;
  width: 100%;
  height: 200rpx;
  background-color: #fff;
  border-radius: 10rpx;
  box-sizing: border-box;
  box-shadow: 2px 2px 5px #ddd;
  .description-info {
    margin-left: 40rpx;
    .title {
      font-weight: 600;
    }
    .description {
      margin-top: 10rpx;
      font-size: 20rpx;
      color: #999;
    }
  }
  .icon-arrow-right {
    margin-left: 20rpx;
  }
}
</style>